<!-- 问答社区首页 - Bootstrap 3 模板 -->
{% extends 'base/base.html' %}
{% load static %}
{% load custom_filters %}

{% block title %}首页 - 问答社区{% endblock %}

{% block content %}
<!-- 页面标题区域 -->
<div class="page-header">
    <h1>最新问题</h1>
    <p class="lead">发现社区中最新的问题和讨论</p>
</div>

<!-- 问题列表 - 优化响应式容器 -->
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
        {% for question in questions %}
        <!-- 问题卡片 - 使用Bootstrap panel -->
        <div class="panel panel-default" style="margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-8">
                        <h3 class="panel-title" style="font-size: 16px; margin: 0; line-height: 2;">
                            <a href="{% url 'main:question_detail' question.pk %}" style="word-break: break-word;">{{ question.title }}</a>
                        </h3>
                    </div>
                    <div class="col-xs-4 text-right">
                        <span class="label label-primary"><a style="color: white; text-decoration: none;" href="{% url 'main:topic_detail' question.topic.pk %}">{{ question.topic.name }}</a></span>
                    </div>
                </div>
            </div>
            <div class="panel-body" style="padding: 12px;">
                <!-- 问题内容 -->
                <p class="text-muted" style="margin-bottom: 0; word-break: break-word;">{{ question.content|truncatechars:120|safe }}</p>
            </div>
            <div class="panel-footer" style="padding: 10px 12px;">
                <div class="row" style="display: flex; align-items: center;">
                    <!-- 用户信息 -->
                    <div class="col-xs-6" style="padding-right: 5px;">
                        <div style="display: flex; align-items: center;">
                            {% if question.author.head and question.author.head.url %}
                            <img src="{{ question.author.head.url }}" class="img-circle" alt="用户头像" style="width: 24px; height: 24px; margin-right: 8px;">
                            {% else %}
                            <img src="{% static 'img/default_avatar.png' %}" class="img-circle" alt="默认头像" style="width: 24px; height: 24px; margin-right: 8px;">
                            {% endif %}
                            <div>
                                <div style="font-size: 12px; color: #555;">{{ question.author.username }}</div>
                                <div style="font-size: 11px; color: #999;">{{ question.created_at|timesince }}前</div>
                            </div>
                        </div>
                    </div>
                    <!-- 操作按钮 -->
                    <div class="col-xs-6" style="padding-left: 5px;">
                        <div class="text-right">
                            <a href="{% url 'main:question_detail' question.pk %}" class="btn btn-xs btn-primary" style="font-size: 11px; padding: 3px 8px;">
                                回答 {{ question.answer_set.count }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <!-- 空状态提示 -->
        <div class="alert alert-info text-center">
            <p>暂无问题，<a href="{% url 'main:create_question' %}" class="btn btn-primary btn-sm">发布第一个问题</a>吧！</p>
        </div>
        {% endfor %}
        
        <!-- 分页控件 -->
        {% if is_paginated %}
        <div class="text-center" style="margin-top: 20px; margin-bottom: 20px;">
            <ul class="pagination pagination-sm">
                {% if page_obj.has_previous %}
                <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
                {% else %}
                <li class="disabled"><a href="#">&laquo;</a></li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                <li {% if page_obj.number == num %}class="active"{% endif %}>
                    <a href="?page={{ num }}">{{ num }}</a>
                </li>
                {% endfor %}
                
                {% if page_obj.has_next %}
                <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
                {% else %}
                <li class="disabled"><a href="#">&raquo;</a></li>
                {% endif %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>
</div>
{% endblock %}
